<template>
  <div class="register">
    <div id="top">
      <img id="img"
           src="https://img0.baidu.com/it/u=4076493291,331486562&fm=26&fmt=auto"
           alt="">
    </div>
    <div id="content">
      <div class="ipt">
        <div>
          <i class="el-icon-user"></i>
          <input placeholder="请输入用户名"
                 v-model="username"
                 clearable
                 class="input_style" />
        </div>
      </div>
      <div class="ipt">
        <div>
          <i class="iconfont icon-dianhua"></i>
          <input placeholder="请输入手机号"
                 v-model="tel"
                 clearable minlength="11" maxlength="11"
                 class="input_style" />
        </div>
      </div>
      <div class="ipt">
        <div>
          <i class="iconfont icon-yanzhengyanzhengma"></i>
          <input placeholder="请输入短信验证"
                 v-model="sms"
                 clearable
                 class="input_style" />
          <span id="shuxian">|</span>
          <span id="yanzhengma" @click="yz"> {{yzm}}</span>
        </div>
      </div>
      <div class="ipt">
        <div>
          <i class="iconfont icon-mima"></i>
          <input placeholder="请输入密码"
                 v-model="pwd"
                 clearable
                 class="input_style" minlength="6" />
        </div>
      </div>
      <div class="ipt">
        <div>
          <i class="iconfont icon-mima"></i>
          <input placeholder="请再次输入密码"
                 v-model="pwdAgain"
                 clearable minlength="6"
                 class="input_style" />
        </div>
      </div>
      <div class="btn">
        <button type="primary"
                @click="register"
                class="login_style">立即注册</button>
      </div>
      <div class="btn_zc">
        <span>已有帐号!<router-link tag="a"
                       :to="{name:'Login'}">去登录</router-link></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data () {
    return {
      username: '',
      tel: '',
      sms: '',
      pwd: '',
      pwdAgain: '',
      yzm:"获取短信验证"
    }
  },
  methods: {
    yz(){
      let yzma='';
      for(let i=0;i<4;i++){
        let a=Math.floor(Math.random()*9);
        yzma=String(yzma)+String(a);
      }
      this.yzm=yzma
    },
    register(){
      if(this.username!=''&&this.tel!=''&&this.sms!=''&&this.pwd!=''){
        if(this.sms==this.yzm){
          if(this.pwd==this.pwdAgain){
            this.ajax({
            method: "post",
            url: "/addUser",
            data:{
              name:this.username,
              password:this.pwd,
              phone:this.tel
            }
          }).then((res) => {
            console.log(res);
            alert(res.data);
            if(res.data=='注册成功'){
              this.$router.push('/login')
            }
          });
          }else{
            alert("两次密码不一致")
          }
        }else{
          alert("验证码错误")
        }
      }else{
        alert("不能为空")
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "https://at.alicdn.com/t/font_2877559_d6fsrd66kuw.css?spm=a313x.7781069.1998910419.85&file=font_2877559_d6fsrd66kuw.css";
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#top {
  width: 100%;
  margin-bottom: 50px;

  #img {
    width: 100%;
    border-radius: 0px 0px 50% 50%;
  }
}

#content {
  height: 25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;

  .ipt {
    width: 75%;

    div {
      display: flex;
      align-items: flex-end;
      border-bottom: 1px solid #c2c2c2;

      .el-icon-user {
        font-size: 1.5rem;
        margin-right: 20px;
      }

      .iconfont {
        font-size: 1.5rem;
        margin-right: 20px;
      }

      input {
        width: 100%;
        height: 1.8rem;
        border: none;
        display: flex;
        outline: none;
        color: rgb(100, 100, 100);
        justify-content: center;
      }
    }
  }

  > div:nth-of-type(3) {
    display: flex;

    input {
      width: 126px;
    }

    #shuxian {
      color: #c2c2c2;
      margin-right: 10px;
    }
    #yanzhengma {
      font-size: 16px;
      color: #414141;
    }
  }

  .btn {
    width: 75%;

    button {
      width: 100%;
      height: 2rem;
      margin-top: 2rem;
      background-color: #679dce;
      color: white;
      font-weight: bold;
      font-size: 17px;
      border: none;
      outline: none;
      border-radius: 2px;
    }
  }

  .btn_zc {
    margin-left: -187px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
    > span:nth-of-type(1) {
      color: gray;
      > a {
        color: #679dce;
      }
    }
  }
}
</style>